<template>
	<view class="content">
		<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in hsjcdList" :key="item.id"
			:options="options" class="every-hsjcd" @click="click" @open="open">
			<view class="hsjcd-info-list">
				<view style="font-weight: bold;">{{item.name}}</view>
			</view>
			<view class="hsjcd-info-list">
				<view class="one-info"><text class="iconfont icon-yingye">当前状态：{{item.status === true ? "开放" : item.status === false ? "关闭" : "--"}}</text></view>
				<view class="one-info"><text class="iconfont icon-ETL-jieshu">窗口数量：{{item.windowNum || "--"}}</text></view>
			</view>
			<view class="hsjcd-info-list">
				<view class="one-info"><text class="iconfont icon-kaishi">开始时间：{{item.openTime || "待编辑"}}</text></view>
				<view class="one-info"><text class="iconfont icon-ETL-jieshu">结束时间：{{item.closeTime || "待编辑"}}</text></view>
			</view>
			<view class="hsjcd-info-list">
				<view><text class="iconfont icon-dingweixiao">详细地址：{{item.addressDetail || "待编辑"}}</text></view>
			</view>
		</u-swipe-action>

		<!-- 编辑 -->
		<view class="edit-tk" v-if="showEditHsjcd">
			<view class="edit-tk-inner">
				<view class="edit-tk-title">编辑</view>
				<u-form :model="currHsjcd" ref="uForm">
					<u-form-item label="接种点名称">
						<u-input v-model="currHsjcd.name" />
					</u-form-item>
					<u-form-item label="开始时间">
						<text @click="handleSelectTime('openTime')">{{currHsjcd.openTime || "请选择"}}</text>
					</u-form-item>
					<u-form-item label="结束时间">
						<text @click="handleSelectTime('closeTime')">{{currHsjcd.closeTime || "请选择"}}</text>
					</u-form-item>
					<u-form-item label="窗口数量">
						<u-input v-model="currHsjcd.windowNum" />
					</u-form-item>
					<u-form-item label="是否开放">
						<u-switch slot="right" v-model="currHsjcd.status"></u-switch>
					</u-form-item>
					<u-form-item label="详细地址">
						<u-input type="textarea" v-model="currHsjcd.addressDetail" />
					</u-form-item>
				</u-form>
			</view>
			<Buttons :btnList="btnList" @handle-dealwith="handleClickButton"></Buttons>
		</view>
		<u-picker v-model="showTimePicker" mode="time" :params="params" @confirm="handleConfirmTime"></u-picker>
	</view>
</template>

<script>
	let me;
	import funcs from "@/static/js/func.js";
	import Buttons from "@/components/common/buttons.vue"
	export default {
		components: {
			Buttons
		},
		data() {
			return {
				hsjcdList: [],
				options: [{
					text: '编辑',
					style: {
						backgroundColor: '#007aff'
					}
				}, ],
				showEditHsjcd: false, // 编辑弹框是否展示
				currHsjcd: { // 当前所要编辑的核酸监测点
					id: "",
					name: "",
					status: false,
					openTime: "",
					closeTime: "",
					addressDetail: "",
					districtCode: "",
					windowNum: 0
				},
				showTimePicker: false,
				setTimeFlag: "", // 当前设置的是开始时间还是结束时间
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: true
				},
				btnList: [{
						id: parseInt(Math.random() * 10000000 + 1),
						title: "取消",
						action: "cancel",
						icon: "icon_close",
						color: "#666"
					},
					{
						id: parseInt(Math.random() * 10000000 + 3),
						title: "确定",
						action: "confirm",
						icon: "icon_pass",
						color: "#24ADF3"
					}
				],
			};
		},
		onLoad() {
			me = this;
			me.getMyHsjcd(); // 获得我的核酸监测点列表
		},
		methods: {
			// 查询自己名下管理的核酸监测点
			getMyHsjcd() {
				uni.showLoading({
					title: "加载中"
				})
				me.$api.requestTask("/ymjzdManage/myYmjzdList", {}, res => {
					uni.hideLoading()
					if (res.code == "200") {
						me.hsjcdList = res.data.map(item => {
							return {
								show: false,
								...item,
								status: item.status == "true" ? true : item.status == "false" ? false :
									"--"
							}
						});
					} else if (res.msg == "登录已过期" || res.msg == "token无效") {
						uni.clearStorageSync()
						uni.reLaunch({
							url: "/pages/mine/mine"
						})
					} else {
						me.hsjcdList = [];
						funcs.showModalTips(res.msg || "查询失败，请重试");
					}
				}, err => {
					uni.hideLoading()
					me.hsjcdList = [];
					funcs.showModalTips("对不起，系统错误，请稍后再试");
				})
			},
			// 各个点位
			click(index, index1) {
				me.hsjcdList[index].show = false;
				// me.currHsjcd = me.hsjcdList[index];
				me.currHsjcd.id = me.hsjcdList[index].id;
				me.currHsjcd.name = me.hsjcdList[index].name;
				me.currHsjcd.status = me.hsjcdList[index].status;
				me.currHsjcd.openTime = me.hsjcdList[index].openTime;
				me.currHsjcd.closeTime = me.hsjcdList[index].closeTime;
				me.currHsjcd.addressDetail = me.hsjcdList[index].addressDetail;
				me.currHsjcd.districtCode = me.hsjcdList[index].districtCode;
				me.currHsjcd.windowNum = me.hsjcdList[index].windowNum;
				me.showEditHsjcd = true;
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				console.log("open", index);
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				me.hsjcdList[index].show = true;
				me.hsjcdList.map((val, idx) => {
					if (index != idx) me.hsjcdList[idx].show = false;
				})
			},
			// 底部公共按钮的处理回调
			handleClickButton(data) {
				console.log(11, data);
				if (data.action == "cancel") {
					me.currHsjcd = {
						id: "",
						name: "",
						status: false,
						openTime: "",
						closeTime: "",
						addressDetail: "",
						districtCode: "",
						windowNum: "",
					};
					me.showEditHsjcd = false;
				} else {
					console.log("currHsjcd", me.currHsjcd);
					uni.showLoading({
						title: "加载中"
					})
					let param = {
						id: me.currHsjcd.id,
						name: me.currHsjcd.name,
						status: String(me.currHsjcd.status),
						openTime: me.currHsjcd.openTime,
						closeTime: me.currHsjcd.closeTime,
						addressDetail: me.currHsjcd.addressDetail,
						districtCode: me.currHsjcd.districtCode,
						windowNum: me.currHsjcd.windowNum,
						manager: uni.getStorageSync("userAccount")
					}
					me.$api.requestTask("/ymjzdManage/updateYmjzd", param, res => {
						uni.hideLoading()
						if (res.code == "200") {
							funcs.showModalTips("操作成功");
							me.getMyHsjcd();
							me.currHsjcd = {
								id: "",
								name: "",
								status: false,
								openTime: "",
								closeTime: "",
								addressDetail: "",
								districtCode: "",
								windowNum: "",
							};
							me.showEditHsjcd = false;
						} else if (res.msg == "登录已过期" || res.msg == "token无效") {
							uni.clearStorageSync()
							uni.reLaunch({
								url: "/pages/mine/mine"
							})
						} else {
							me.hsjcdList = [];
							funcs.showModalTips(res.msg || "查询失败，请重试");
						}
					}, err => {
						uni.hideLoading()
						me.hsjcdList = [];
						funcs.showModalTips("对不起，系统错误，请稍后再试");
					})
				}
			},
			// 选择时间
			handleSelectTime(flag) {
				console.log("handleSelectTime", flag);
				me.setTimeFlag = flag;
				me.showTimePicker = true;
			},
			/**
			 * 确定要选择某个时间

			 * @param {Object} e
			 */
			handleConfirmTime(e) {
				if (me.setTimeFlag == "openTime") {
					me.currHsjcd.openTime = `${e.hour}:${e.minute}:${e.second}`;
				} else if (me.setTimeFlag == "closeTime") {
					me.currHsjcd.closeTime = `${e.hour}:${e.minute}:${e.second}`;
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		padding: 24rpx;

		.every-hsjcd {
			padding: 24rpx;

			&:not(:first-child) {
				margin-top: 24rpx;
			}

			border: 1px solid #ccc;
			border-radius: 8rpx;

			.hsjcd-info-list {
				display: flex;
				justify-content: space-between;
				line-height: 1.6em;
				.one-info {
					flex: .5;
				}
				/deep/.iconfont {
					span {
						padding-left: 16rpx;
					}
				}
			}
		}

		.edit-tk {
			position: fixed;
			width: 100vw;
			height: 100vh;
			left: 0;
			top: 0;
			background-color: rgba(0, 0, 0, .5);
			z-index: 10;

			.edit-tk-inner {
				position: fixed;
				width: 80vw;
				height: calc(100vh - 148rpx - 72px);
				overflow-y: auto;
				left: 10vw;
				bottom: 148rpx;
				background-color: #fff;
				border-radius: 12rpx;
				padding: 24rpx 12rpx;

				.edit-tk-title {
					font-size: 1.2em;
					font-weight: bold;
					text-align: center;
				}

				.u-form {
					/deep/.u-form-item {
						.u-form-item__body {
							display: flex;

							.u-form-item--left {
								flex: 0.3 !important;
							}

							.u-form-item--right {
								flex: 0.7;

								.u-form-item--right__content {
									display: inline-block;
								}
							}
						}
					}
				}
			}
		}
	}
</style>